<template>
    <el-card class="update-log">
        <template v-slot:header>
            <div class="clearfix">
                <span>电话簿</span>
            </div>
        </template>
        <div class="body" style="height: 300px; ">

            <el-form :model="queryPhoneModel" ref="queryPhoneRef" :inline="true" v-show="showSearch" label-width="60px">
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="queryPhoneModel.username" placeholder="请输入姓名" style="width: 100px;" clearable
                        @keyup.enter="queryPhone" />
                </el-form-item>
                <el-form-item style="width: 140px;">
                    <el-button type="primary" icon="Search" @click="queryPhone" style="width: 60px;">搜索</el-button>
                    <el-button icon="Refresh" @click="resetPhone" style="width: 60px;">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="phone-book">
                <el-table :data="phoneModel" style="width: 100%">
                    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="phoneNumber" label="电话"></el-table-column>
                </el-table>
            </div>

        </div>
    </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getUserPhone } from '@/api/personal/phone';

onMounted(() => {
    getUserPhone().then(res => {
        console.log(res)
        allPhoneData.value = res;
        phoneModel.value = res;
    });

});

const queryPhoneModel = ref({
    username: '',
});

const showSearch = ref(true);
const phoneModel = ref([]);

// 模拟电话簿数据
const allPhoneData = ref([])
// const allPhoneData = ref([
//     { phoneName: '张三', phone: '123456789' },
//     { phoneName: '李四', phone: '987654321' },
//     { phoneName: '王五', phone: '456789123' },
//     { phoneName: '赵六', phone: '321654987' },
//     { phoneName: '钱七', phone: '159753468' },
//     { phoneName: '孙八', phone: '753951852' },
//     { phoneName: '周九', phone: '258147369' },
//     { phoneName: '吴十', phone: '369258147' },
//     { phoneName: '郑十一', phone: '147258369' },
//     { phoneName: '冯十二', phone: '963852741' },
//     { phoneName: '陈十三', phone: '852963741' },
//     { phoneName: '褚十四', phone: '741369852' },
//     { phoneName: '卫十五', phone: '159258753' },
//     { phoneName: '蒋十六', phone: '864209753' },
//     { phoneName: '沈十七', phone: '753852146' },
//     { phoneName: '韩十八', phone: '258963147' },
//     { phoneName: '杨十九', phone: '147369258' },
//     { phoneName: '朱二十', phone: '369147258' },
//     { phoneName: '秦二十一', phone: '258147963' },
//     { phoneName: '尤二十二', phone: '852741369' },
// ]);

// 查询电话簿

const queryPhone = () => {
    console.log(queryPhoneModel.value)
    if (queryPhoneModel.value.username) {
        console.log(queryPhoneModel.value.username)
        phoneModel.value = allPhoneData.value.filter(item =>
            item.username.includes(queryPhoneModel.value.username)
        );
    } else {
        phoneModel.value = allPhoneData.value;
    }
};

// 重置查询
const resetPhone = () => {
    queryPhoneModel.value.username = '';
    phoneModel.value = allPhoneData.value;
};
// 初始化电话簿
resetPhone();



//----------------------------------------websockt------------------
const websocktName = ref("PhoneBook");
let ws;
const openHandler = () => {
    console.log("ws 连接成功！");
};
const closeHandler = () => {
    console.log("ws 连接关闭！");
};
const errorHandler = () => {
    console.log("ws 连接错误！");
};
const messageHandler = (e) => {
    console.log("ws 收到消息：", e.data);
    const msg = JSON.parse(e.data);
    allPhoneData.value = msg;
    phoneModel.value = msg;
};
onMounted(() => {
    ws = new WebSocket(`ws://localhost:9401/ws/data/${websocktName.value}`);
    ws.addEventListener("open", openHandler);
    ws.addEventListener("close", closeHandler);
    ws.addEventListener("error", errorHandler);
    ws.addEventListener("message", messageHandler);
});
</script>

<style scoped>
.phone-book {
    max-height: 300px;
    /* 设置最大高度 */
    overflow-y: auto;
    /* 超出部分可滚动 */
}
</style>
